<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页面</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        .screen { display: none; padding: 20px; }
        .screen.active { display: block; }
        button { padding: 10px 20px; font-size: 16px; margin: 10px; }
        #game-screen { background: #f0f0f0; }
        canvas { border: 1px solid #000; }
    </style>
</head>
<body>
    <h1>游戏测试页面</h1>
    
    <div id="start-screen" class="screen active">
        <h2>开始界面</h2>
        <button id="start-button">开始游戏</button>
    </div>
    
    <div id="game-screen" class="screen">
        <h2>游戏界面</h2>
        <canvas id="game-canvas" width="800" height="600"></canvas>
        <div id="game-message">游戏正在运行...</div>
    </div>
    
    <script>
        // 简单的测试脚本
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const startButton = document.getElementById('start-button');
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        
        // 切换屏幕函数
        function switchScreen(screenName) {
            console.log(`切换到屏幕: ${screenName}`);
            startScreen.classList.remove('active');
            gameScreen.classList.remove('active');
            
            if (screenName === 'game') {
                gameScreen.classList.add('active');
                // 在画布上绘制一些内容
                ctx.fillStyle = '#4CAF50';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = '#FFF';
                ctx.font = '30px Arial';
                ctx.fillText('游戏已启动!', 300, 300);
            } else {
                startScreen.classList.add('active');
            }
        }
        
        // 绑定按钮事件
        startButton.addEventListener('click', function() {
            console.log('开始按钮被点击');
            switchScreen('game');
        });
        
        console.log('测试页面加载完成');
        console.log('开始按钮元素:', startButton);
    </script>
</body>
</html>